<template>
	<view class="cu-list menu" :class="[menuBorder?'sm-border':'',menuCard?'card-menu margin-top':'']">
		<template v-for="(item,index) in list" :key="index">
			<view v-if="item.type=='image'" class="cu-item padding">
				<view class="content">
					<text :class="'cuIcon-'+item.cuIcon" class="text-black"></text>
					<text class="text-black">{{item.name}}</text>
				</view>
				<view class="action">
					<view class="cu-avatar round lg" :style="{backgroundImage:'url('+item.desc+');'}"></view>
				</view>
			</view>
			<view v-else  class="cu-item" :class="menuArrow?'arrow':''" :data-index="index" :data-value="item" @click="handleSelect">
				<view class="content" >
					<text :class="'cuIcon-'+item.cuIcon" class="text-black"></text>
					<text class="text-black">{{item.name}}</text>
				</view>
				<view style="max-width: 10rem;" class="action text-size-24" v-if="item.desc">{{item.desc}}</view>
			</view> 
		</template>
	</view>
</template>

<script setup lang="ts">
	import {
		useSettingStore
	} from '@/stores/index';
	import {
		watch,
		computed,
		ref
	} from "vue";
	const setting = useSettingStore();
	const emit = defineEmits(['action']);
	const props = defineProps({
		menuBorder: {
			type: [Boolean, String],
			default: false
		},
		menuCard: {
			type: [Boolean, String],
			default: false
		},
		menuArrow: {
			type: [Boolean, String],
			default: false
		},
		list: Array
	})
	const handleSelect = (e) => {
		emit('action', e)
	}
</script>

<style>
	.swiper-item {
		height: 100%;
	}
</style>
